<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>翻斗花园-文件上传</title>
    <meta name="description"
          content="Elios is a stunning and awesome looking Creative Portfolio Bootstrap 5 Template.It has 5 main pages."/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- CSS
    ========================= -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/elegant-icons.min.css">
    <link rel="stylesheet" href="assets/css/simple-line-icons.css">
    <link rel="stylesheet" href="assets/css/ionicons.min.css">
    <link rel="stylesheet" href="assets/css/font.awesome.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <!--    <link rel="stylesheet" href="assets/css/nice-select.css">-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/base.css"/>

    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- index Style CSS -->
    <link rel="stylesheet" href="assets/css/index.css">

    <!--modernizr min js here-->
    <!--    <script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>-->
</head>

<body>
<div class="menu_overlay">
    <div class="menu_close">
        <i class="ion-android-close"></i>
    </div>
    <div class="main_menu">
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a data-toggle="collapse" data-target="#submenu" href="javascript:void(0)">文件夹 <i
                    class="ion-ios-arrow-down"></i></a>
                    <ul class="sub_menu collapse" id="submenu">
                        <li><a href="portfolio.html">文件夹</a></li>
                        <li><a href="single-portfolio.html">单一的</a></li>
                    </ul>
                </li>
                <li><a data-toggle="collapse" data-target="#submenu2" href="javascript:void(0)">博客 <i
                    class="ion-ios-arrow-down"></i></a>
                    <ul class="sub_menu collapse" id="submenu2">
                        <li><a href="blog.html">博客1</a></li>
                        <li><a href="blog-details.html">博客详情</a></li>
                    </ul>
                </li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </div>
</div>

<!-- header section start -->
<header class="header_section header_transparent">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="header_section_inner d-flex justify-content-between align-items-center">
                    <div class="logo" style="font-size: 30px;color: white">
                        <a href="index.html">翻斗花园</a>
                    </div>
                    <div class="menu_open">
                        <a class="d-flex align-items-center text-white" href="javascript:void(0)"> <span>menu</span>
                            <i class="ion-drag"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>
<!-- header section end -->

<!-- slider section start -->
<section class="home_slide_section">

    <div class="slideshow slider__reveal">
        <div class="slide one">
            <div class="slide__img-wrap">
                <div class="container1">
                    <form class="form" action="upload.php" method="post" enctype="multipart/form-data">
                        <span class="form-title"> 上传文件</span>

                        <label for="file-input" class="drop-container">
                            <p class="form-paragraph">
                                请选择图片
                            </p>
                            <span class="drop-title"> 文件拖动至此处</span>
                            <input type="file" accept="image/*" required="" id="file-input" name="file" multiple>
                        </label>

                        <!--上传按钮-->
                        <button class="btn" type="submit" name="submit">
                            <div class="wrapper">
                                <p class="text"><b>点击上传</b></p>

                                <div class="flower flower1">
                                    <div class="petal one"></div>
                                    <div class="petal two"></div>
                                    <div class="petal three"></div>
                                    <div class="petal four"></div>
                                </div>
                                <div class="flower flower2">
                                    <div class="petal one"></div>
                                    <div class="petal two"></div>
                                    <div class="petal three"></div>
                                    <div class="petal four"></div>
                                </div>
                                <div class="flower flower3">
                                    <div class="petal one"></div>
                                    <div class="petal two"></div>
                                    <div class="petal three"></div>
                                    <div class="petal four"></div>
                                </div>
                                <div class="flower flower4">
                                    <div class="petal one"></div>
                                    <div class="petal two"></div>
                                    <div class="petal three"></div>
                                    <div class="petal four"></div>
                                </div>
                                <div class="flower flower5">
                                    <div class="petal one"></div>
                                    <div class="petal two"></div>
                                    <div class="petal three"></div>
                                    <div class="petal four"></div>
                                </div>
                                <div class="flower flower6">
                                    <div class="petal one"></div>
                                    <div class="petal two"></div>
                                    <div class="petal three"></div>
                                    <div class="petal four"></div>
                                </div>
                            </div>
                        </button>
                    </form>

                </div>
            </div>
            <div class="slider_shap_img shape shape-1 scene">
                <span data-depth="0.5"><img src="assets/img/slider/shap-dots.png" alt=""></span>
            </div>
            <div class="slider_shap_img2 shape shape-1 scene">
                <span data-depth="1.7"><img src="assets/img/slider/slider-shap.png" alt=""></span>
            </div>
        </div>

    </div>
</section>
<!-- slider section end -->

<!-- footer section start -->
<footer class="footer_section footer_position ">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="footer_inner d-flex justify-content-between align-items-center">
                    <div class="copyright_right">
                        <p> @ Lattiex. <a target="_blank" href="http://www.lattiex.com/" title="翻斗花园">翻斗花园</a>
                        </p>
                    </div>
                    <div class="copyright_right">
                        <p> 累计上传 <b style="color: white">{{$fid}}</b> 个文件
                        </p>
                    </div>
                    <div class="copyright_right">
                        <p> @ Lattiex. <a target="_blank" href="http://www.lattiex.com/" title="翻斗花园">阿米诺斯</a>
                        </p>

                    </div>
                </div>
            </div>
        </div>
    </div>

</footer>
<!-- footer section end -->
<script>
    const dropContainer = document.querySelector('.drop-container');
    const fileInput = document.getElementById('file-input');
    const dropTitle = document.querySelector('.drop-title')

    //拖拽元素在目标上方移动时触发
    dropContainer.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropContainer.style.background = 'rgba(0,140,255,0.164)';
        dropContainer.style.borderColor = 'rgba(17,17,17,0.616)';
        dropTitle.style.color = '#d7d7d7';
    });

    //在拖拽元素离开目标区域时触发
    dropContainer.addEventListener('dragleave', () => {
        dropContainer.style.backgroundColor = '#fff';
        dropTitle.style.color = '#444';
    });

    //在用户释放拖拽的文件时触发。
    dropContainer.addEventListener('drop', (e) => {
        e.preventDefault();
        dropContainer.style.backgroundColor = '#fff';
        dropTitle.style.color = '#444';
        const files = e.dataTransfer.files;
        fileInput.files = files;
    });


</script>
<!-- Js
========================= -->
<script src="assets/js/vendor/jquery-3.4.1.min.js"></script>
<script src="assets/js/vendor/popper.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.scrollup.min.js"></script>
<script src="assets/js/images-loaded.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/jquery.nice-select.js"></script>
<script src="assets/js/tippy-bundle.umd.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/mailchimp-ajax.js"></script>
<script src="assets/js/parallax.js"></script>

<script src="assets/js/TweenMax.min.js"></script>
<script src="assets/js/motionRevealSlideshow.js"></script>

<!-- Main JS -->
<script src="assets/js/main.js"></script>
<script>

    $.ajax({
        url: 'check.php',
        type: 'POST',
        success: function (response) {
            var fid = response;
            $('.copyright_right b').text(fid);
        }
    })

</script>
</body>

</html>
